import {
	ref,
	reactive
} from 'vue'
import dayjs from 'dayjs'
// 开启下滑显示 nav 逻辑
export function useScollShowNav(fn = 0) {
	// 是否触发第一滚动
	const isScroll = ref(false)
	const showFixNav = ref(false)
	const onPageScroll = (e) => {
		if (e.detail.scrollTop > 266) {
			showFixNav.value = true
			if (!isScroll.value) {
				isScroll.value = true
			}
		} else {
			showFixNav.value = false
		}

	}
	return {
		showFixNav,
		onPageScroll,
		isScroll
	}
}

// 全部状态 和 日历组件使用
export function useCalendarAndState() {
	// 控制日历组件显示隐藏
	const calendarShow = ref(false);
	// 日历最小显示时间 和 日历最大显示时间 和 最大显示多少个月
	const minDate = ref('2022-07-24')
	const maxDate = ref('2025-07-24')
	// maxDate.value = getCurrentDate()
	const monthNum = ref(12)
	// 筛选条件参数
	const screenParams = reactive({
		state: '全部',
		time: dayjs().format('YYYY-MM-DD')
	})
	// 选择时间
	const onTimeConfirm = (e) => {
		const selTime = e['0']
		screenParams.time = selTime
		calendarShow.value = false
	}
	// 控制状态选择
	const stateShow = ref(false);
	const stateColumns = reactive([
		['全部', '未出', '已出']
	]);
	const statePickerRef = ref(null)
	// 状态确定事件
	const onstateComfirm = () => {
		statePickerRef.value.confirm()

	}
	const onConfirm = (e) => {
		screenParams.state = e.value[0]
		stateShow.value = false
	}
	return {
		calendarShow,
		minDate,
		maxDate,
		monthNum,
		screenParams,
		onTimeConfirm,
		stateShow,
		stateColumns,
		statePickerRef,
		onstateComfirm,
		onConfirm

	}
}